<template>
    <div class="love">
        <van-nav-bar>
            <template #left>
                <div style="color: #222222;font-weight: 700;font-size: 15px;">山西省 <van-icon name="arrow-down" size="12px"
                        color="rgb(51,51,51)" /></div>
                <!-- 搜索框 -->
                <van-search shape="round" v-model="value" placeholder="搜索:周杰伦/junk kook" />
            </template>
            <template #right>
                <van-image round width="21px" height="21px"
                    src="https://pages.c-ctrip.com/you/lvpai-home-defaultavat.jpg" />
            </template>
        </van-nav-bar>
        <div class="myCard" v-for="item in myCardData">
            <van-image height="253.44" :src="item.img" />
            <div class="title">666</div>
            <div class="bottom">
                <van-row>
                    <van-col span="17">
                        <van-image round width="24" height="24"
                            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                        <div class="username">666</div>
                    </van-col>
                    <van-col span="7">
                        <div class="icon">
                            <van-icon size="18" :name="item.userPhoto"></van-icon>
                        </div>
                        <div class="num">666</div>
                    </van-col>
                </van-row>
            </div>
        </div>
        </div>
</template>
  
<script></script>


<style  scoped>
.love {
    background-color: #e2f6e9;

    .myCard {
        display: inline-block;
        width: "calc(50% - 15px)";
        margin-left: 10px;
        margin-top: 10px;
        border-radius: 6px;
        background-color: #ffffff;
        overflow: hidden;

        .title {
            color: #222222;
            font-size: 12px;
            margin-top: 8px;
            margin-left: 10px;
            
            width: 178px;
        }

        .bottom {
            margin: 8px 10px 12px 10px;
        }

        .username {
            float: right;
            width: 91.5px;
            height: 24px;
            line-height: 24px;
            color: #333333;
            font-size: 10px;
        }

        .icon {
            float: left;
            padding-top: 3px;
            padding-left: 10px;

        }

        .num {
            color: #222222;
            font-size: 12px;
            float: right;
            height: 24px;
            line-height: 24px;
        }
    }
}
.btn{
    position: fixed;
    bottom: 70px;
}
.van-nav-bar {
    background-color: #4fc08d;

    .van-search {
        background-color: #4fc08d;
        height: 15px;
    }
}
</style>